<template>
  <div class="multicolumn">
    <div class="container">
      <div class="left-container">
        <!-- 主分类 -->
        <div class="dictParent adjustDic" :style="contentViewHeight">
          <el-input @input="getModelFun()" v-model="modularName" placeholder="输入名称搜索" class="searchInput">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="getModelFun()"></i>
          </el-input>

          <h4 class="dicTypeTitle">模块列表</h4>

          <ul class="dict_parentWrap">
            <li v-for="(item, index) in modelList" @click="changeModel(item, index)" :class="item.active == true ? 'active' : ''">
              {{ item.modularName }}
            </li>
          </ul>
        </div>
      </div>
      <div class="right-container">
        <!-- 列表 -->
        <div class="contentWrap">
          <div class="searchList">
            <el-form :inline="true" :model="formQuery" class="demo-form-inline header-form">
              <el-form-item label="关键字:">
                <el-input v-model="formQuery.names" placeholder="请输入关键字"></el-input>
              </el-form-item>
              <el-form-item label="版本:" label-width="50px">
                <el-radio-group v-model="formQuery.checkedHistory" >
                  <el-radio :label="1">最新版本</el-radio>
                  <el-radio :label="2">全部版本</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="getList">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <section class="from-container">
            <el-button type="primary" size="mini" @click="add">新增</el-button>
          </section>
          <template slot="title">
            <i class="header-icon el-icon-folder-opened"></i>{{ this.modularName }}
          </template>
          <el-table size="mini" :data="tableData" style="width: 100%" row-key="id" border :header-cell-style="{
                  'background-color': '#eeeeee !important',
                }"
            :row-class-name="tableRowClassName" :default-sort="{ prop: 'label', order: 'descending' }">
            <el-table-column type="index" width="70" label="序号" align="center">
              <template slot-scope="scope">
          <span>{{
              (formQuery.pageNo - 1) * formQuery.pageSize + scope.$index + 1
            }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="names" label="业务类型信息" min-width="130px">
              <template slot-scope="scope">
                <section>
                  {{$dictUtils.getDictLabel(scope.row.busValue,scope.row.busType)}}
                </section>
                <section>
                  描述：{{scope.row.describes}}
                </section>
              </template>
            </el-table-column>
            <el-table-column prop="version" label="当前版本"></el-table-column>
            <el-table-column prop="names" label="引用模型"></el-table-column>
            <el-table-column prop="state" label="状态">
              <template slot-scope="scope">
                  <div class="state" :class="{empty: scope.row.state=== -1,normal: scope.row.state===1,invalid:scope.row.state===0}"><span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}</div>
              </template>

            </el-table-column>
            <el-table-column prop="address" label="操作" width="214">
              <template slot-scope="scope">
                  <!--<el-link type="primary" v-if="hasPermission('model:model:edit')&&scope.row.state===0" :underline="false" @click="editState(scope.row.id,1)">启用</el-link>
                  <el-link type="primary" v-if="hasPermission('model:model:edit')&&scope.row.state===1" :underline="false" @click="editState(scope.row.id,0)">停用</el-link>-->
                  <template v-for="item in $dictUtils.getDictList('state')">
                      <el-link type="primary" v-if="item.value !=='-1'&& item.value!==(scope.row.state+'')" :underline="false"  @click="editState(scope.row.id,item.value)" :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state"
                      >{{item.label}}
                      </el-link>
                  </template>
                <el-link type="primary" v-if="hasPermission('model:model:edit')" :underline="false" @click="edit(scope.row)">修改</el-link>
<!--                <el-link type="primary" v-if="hasPermission('model:model:del')" :underline="false" @click="del(scope.row.id,scope.row.state)">删除</el-link>-->

<!--                  <el-link type="primary" v-if="hasPermission('model:busin:list')" :underline="false" @click="businList(scope.row)">业务控制</el-link>-->
<!--                  <el-link type="primary" v-if="hasPermission('model:pageGroup:list')" :underline="false" @click="pageList(scope.row)">页面设置</el-link>-->
<!--                  <el-link type="primary" v-if="hasPermission('model:model:synchro')" :underline="false" @click="synchro(scope.row)">同步到租户</el-link>-->
                  <el-dropdown @command="handleCommand">
                      <el-link :underline="false" type="primary"  class="el-dropdown-link">
                          更多<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-link>
                      <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item v-if="hasPermission('model:model:del')" :command="{method:'del',row:scope.row}">删除</el-dropdown-item>
                          <el-dropdown-item v-if="hasPermission('model:busin:list')" :command="{method:'busin',row:scope.row}">业务控制</el-dropdown-item>
                          <el-dropdown-item v-if="hasPermission('model:pageGroup:list')" :command="{method:'page',row:scope.row}">页面设置</el-dropdown-item>
                          <el-dropdown-item v-if="hasPermission('model:model:synchro')" :command="{method:'synchro',row:scope.row}">同步到租户</el-dropdown-item>
                      </el-dropdown-menu>
                  </el-dropdown>

              </template>
            </el-table-column>
          </el-table>
          <el-pagination background @current-change="handleCurrentChange" @size-change="handlerSizeChange" :current-page.sync="formQuery.pageNo"
            :page-size="formQuery.pageSize" layout="total,sizes,prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <modelForm ref="modelForm" @refresh="getList"></modelForm>
    <businList ref="businList"></businList>
    <pageList ref="pageList"></pageList>
  </div>
</template>

<script>
  import { getModel, getModelList, updateState, modelDelete} from '@/api/model/model.js'
  import modelForm from './modelForm'
import businList from './busin/businList'
import pageList from './page/pageList'

export default {
    data () {
      return {
        modelList: [],
        formQuery: {
          modularId: '',
          modularName: '',
          names: '',
          pageNo: 1,
          pageSize: 10,
          checkedHistory: 1,
          processType: ''
        },
        tyId: 1, // 获取模块要用
        modularName: '',
        tableData: [],
        activeNames: [],
        switchValue: true,
        total: 1
      }
  },
    components: {
      modelForm,
      businList,
      pageList
    },
    computed: {
      contentViewHeight () {
        let height = this.$store.state.common.documentClientHeight - 122
      return {
          minHeight: height + 'px'
        }
    }
    },
    activated () {
      this.getModelFun()
  },
    methods: {
      // 获取模块
      getModelFun () {
        getModel({
          modularName: this.modularName,
          type: this.tyId
        }).then(
          (res) => {
            if ((res.data.code = '200')) {
              if (res.data.result.length === 0) {
                this.modelList = []
              return
            }
            }
            res.data.result.forEach((item) => {
              this.$set(item, 'active', false)
          })
          res.data.result[0].active = true
          this.modelList = res.data.result
          if (this.modelList.length > 0) {
              this.formQuery.modularId = res.data.result[0].id
            this.formQuery.modularName = res.data.result[0].modularName
            // this.formQuery.processType = res.data.result[0].processType
            this.getList()
          }
          }
        )
    },
        handleCommand (command) {
          console.log(command.method)
          if (command.method === 'del') {
              this.del(command.row.id, command.row.state)
          } else if (command.method === 'busin') {
              this.businList(command.row)
          } else if (command.method === 'page') {
              this.pageList(command.row)
          } else if (command === 'synchro') {
              this.synchro(command.row)
          }
        },
      // 改变模块
      changeModel (row, index) {
        this.formQuery.modularId = row.id
      this.formQuery.modularName = row.modularName
      // this.formQuery.processType = row.processType
      this.modelList.forEach((item) => {
          item.active = false
      })
      this.modelList[index].active = true

      this.getList()
    },
      // 获取列表
      getList () {
        this.tableData = []

      getModelList(this.formQuery).then((res) => {
          if (res.data.code === '200') {
            if (res.data.result.length < 1) {
              return
          }
            this.tableData = res.data.result.list
            this.total = res.data.result.count
        }
        })
    },
      // 新增
      add () {
        this.$refs.modelForm.init(
          'add', {
            modularId: this.formQuery.modularId,
            modularName: this.formQuery.modularName,
            // processType: this.formQuery.processType
          }
        )
    },
      // 详情
      view (row) {
        this.$refs.modelForm.view(row, {
          modularId: this.formQuery.modularId,
          modularName: this.formQuery.modularName,
          // processType: this.formQuery.processType
        })
    },
      // 修改
      edit (row) {
        console.log(row)
      this.$refs.modelForm.init('edit', row, {
          modularName: this.formQuery.modularName
        })
    },
      businList (row) {
        console.log(row)
        this.$refs.businList.init('list', row)
      },
      pageList (row) {
        this.$refs.pageList.init('list', row)
      },
      // 改变类型状态
      editState (id, state) {
          console.log(state)
        if (state === '1') {
            console.log(state);
          updateState({id: id, state: state}).then(res => {
            if (res.data.code === '200') {
              this.getList()
              this.$message({
                type: 'success',
                message: '状态修改成功'
              })
            }
          });
        } else if (state === '0'){
          this.$confirm('停用后，引用该类型的旧业务仍可以继续执行，但该业务类型将新业务引用，确认停用吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((res) => {
            updateState({id: id, state: state}).then(res => {
              if (res.data.code === '200') {
                this.getList()
                this.$message({
                  type: 'success',
                  message: '状态修改成功'
                })
              }
            })
          });
        }
      },
      // 删除类型
      del (id, state) {
        if (state === 1) {
          this.$notify.error({
            title: '错误',
            message: '已启用，不支持删除！如果不继续使用，可将此策略停用！'
          });
        } else {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((res) => {
            modelDelete({
              id: id
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getList()
              }
            })
          });
        }

      },
      handlerSizeChange(val){
        this.formQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.formQuery.pageNo = val
      this.getList()
      console.log(`当前页: ${val}`)
    },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
      } else {
          return 'success-row'
      }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "~@/assets/scss/model.scss";

  .from-container {
    margin-bottom: 10px;
  }
  ::v-deep.header-form{
    .el-form-item:first-child{
        margin-right: 50px;
    }
}

  /* 修改表格里面 筛选 */
  /* .el-icon-arrow-down:before{
  content: ;
} */
  /*::v-deep .el-table__column-filter-trigger {*/
  /*  position: absolute;*/
  /*  right: 15px;*/
  /*}*/


  /*::v-deep .el-collapse-item__header {*/
  /*  background-color: #f7f7f7 !important;*/
  /*  padding: 0 20px;*/
  /*  font-size: 18px;*/
  /*  color: #333;*/

  /*  i {*/
  /*    margin-right: 10px;*/
  /*  }*/
  /*}*/

  /*::v-deep .el-collapse-item__content {*/
  /*  padding: 10px 0;*/
  /*}*/
</style>
